<include file="header" />
<body>
<div class="wraper">
    <div class="header2 header white text-center">
        <a href="#" class="iconfont icon-chevron-left white"></a>
        <div class=" font-16">用户数</div>
    </div>
    <div class="padding-12 flex-between">
        <div class="day">
            <input id="month" type="text" />
            <div class="kongbai"></div>
        </div>
        <div class="iconfont icon-riqi1 gray2"></div>
    </div>
    <div class="flex-between titles">
        <div>沃麦隆</div>
        <div>用户数据</div>
    </div>
    <div id="container" class="stay-out-late" style="min-width:100%;height:164px">
        <div class="dataload">
            <img src="/assets/base/statistics/images/loading.gif">
            <p class="gray text-center">数据加载中</p>
        </div>
    </div>
    <div class="content">
        <div class="box flex-center">
            <span class="iconfont icon-mingxishuju icon blue"></span>
            <span>明细数据</span>
        </div>
        <div class="box2 gray">
        </div>
    </div>
</div>

</body>
<include file="commonJs"/>
<script>
    $(function () {
        $('#month').mobiscroll().date({
            theme: 'android-holo-light',//皮肤样式
            lang: 'zh',//中文
            display: 'bottom',//位于底部
            dateFormat: 'yyyy/mm'//格式
        });
    });
    $('.icon-riqi1').click(function () {
        $('#month').click();
    });
    $(function () {
        var date=new Date();
        var month=date.getMonth()+1;
        var year=date.getFullYear();
        if (month<10){
            month='0'+month;
        }
        var time=year+'/'+month;
        $('#month').val(time);
        getData(time);
    });

    $(function () {
        var time;
        $("#month").change(function () {
            time = $(this).val();
            getData(time);
        });
    });

    function getData(time) {
        var month = [];
        var monthData = [];
        $.ajax({
            url: '/base/ChargingdataAgent/usertrend',
            type: 'POST',
            data: {'create_time': time},
            dataType: 'JSON',
            beforeSend: function () {
                $('.dataload').show();
            },
            success: function (data) {
                console.log(data);
                $('.dataload').hide();
                if (data.success == 'S') {
                    if (data.data.length > 0) {
                        var _html='';
                        $.each(data.data, function (i, k) {
                            month.push((k.create_time.substring(5, k.create_time.length)).replace('-','/'));
                            monthData.push(parseFloat(k.userCount));
                            _html+=' <div class="data flex-between padding-0"> <div>'+ k.create_time +'</div> <div>'+k.userCount +'人 </div> </div>'
                        })
                        $('.box2').html(_html);
                    }

                }
                setCharts('#container', month, monthData);
            },
            error: function () {
                fm.alert('网络错误，请重试');
            }
        });
    }


    function setCharts(chartname, month, monthData) {
        $(chartname).highcharts({
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            xAxis: {
                tickWidth: 0, // 主刻度的宽度
                categories:month,
                labels: {
                    step: 6,
                    align: 'left',
                    x: -2
                }
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            plotOptions: {
                series: {
                    marker: {
                        enabled: false /*数据点是否显示*/

                    }
                }
            },
            tooltip: {
                valueSuffix: ''
            },
            colors: [
                "#27a7e4"
            ],
            series: [{
                name: '',
                data: monthData
            }]
        });
    }


</script>
</html>